<template>
  <div class="home">
    <SideMenu></SideMenu>
    <div class="mobile-bot-hig"></div>
    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div id="app">
      <!-- <div id="echartContainer" style="width:500px; height:500px"></div> -->
      <section>
        <option>换肤</option>
      </section>
      <router-link to="/ip">df</router-link>
      <!-- <div @click="WebSocketTest()">djfke</div> -->
    </div>
  </div>
</template>
<script>
import { Button, Select } from "element-ui";
import { home } from "../assets/js/home.js";
import SideMenu from "../components/SideMenu.vue";
// Vue.use(Button).use(Select)
// var echarts = require("echarts");
export default {
  name: "home",
  components: {
    SideMenu
  },
  data() {
    return {
      isCollapse: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      ws: ""
    };
  },
  created() {
    //用vuex设置状态，改变class;
    // this.$store.dispatch("inHome");
    console.log(this.$store.commit);
  },
  mounted() {
    let _this = this;
    console.log(_this.leftMenus);
  },
  methods: {
    test1: function(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("echartContainer"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: data,
            type: "line"
          }
        ]
      });
    },
    tax: function() {
      let _this = this;
      var deep = [];
      //  _this.test1(data)
      var timer = setInterval(function() {
        var data = [820, 932, 901, 934, 1290, 1330, 1320];
        // ajax
        if (deep.length < data.length) {
          deep.push(data);
        } else {
          deep.splice(deep.length - 1, 1);
        }
        _this.test1(deep);
      }, 10000);
      //  }
    },
    menuSelected() {
      alert(1);
    },
    toggleClick() {
      //菜单展开功能
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>
<style lang='less'>
</style>